<template>
  <div>
    <router-link to="/">图书列表</router-link>
    <h1>添加图书</h1>
    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="图书名称">
        <el-input v-model="book.bookName"></el-input>
      </el-form-item>
      <el-form-item label="作者id">
        <el-input v-model="book.authorId"></el-input>
      </el-form-item>
      <el-form-item label="出版设">
        <el-input v-model="book.publisher"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="book.price"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="saveBook">保存</el-button>


  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'AddView',
  data() {
    return {
      labelPosition: 'right',
      book: {
        bookName: '',
        authorId: '',
        publisher: '',
        price: '',
      }
    };
  },
  methods: {
    saveBook() {
      this.axios.post("book", this.book)
          .then(result => {
            this.$router.push({
              path: "/",
            })
          })

    }
  }

}
</script>
